<template>
  <div class="app-container">
    <!-- 实时数据概况 -->
    <el-card>
      <LiveOverview :tabs="realTimeData" title="数据概况" />
    </el-card>

    <!-- 结算状态 start -->
    <div class="settle-status flex align-center justify-between mt-20">
      <div class="left flex">
        <p>
          <span>结算状态：</span>
          <span :style="{ color: settleStatusColor }">{{ settleStatus }}</span>
          <el-popover
            placement="bottom"
            title="结算记录"
            width="300"
            trigger="click"
            class="ml-10"
            v-if="records.status === 2"
          >
            <div>
              <TitleLine title="结算备注" />
              <p class="pl-15">{{ records && records.remark }}</p>
            </div>
            <div>
              <TitleLine title="操作人信息" />
              <p class="pl-15">操作时间：{{ records && records.auditTime }}</p>
              <p class="pl-15">操作员：{{ records && records.auditUser }}</p>
            </div>
            <span class="text-link-blue" slot="reference">查看记录</span>
          </el-popover>
        </p>
        <p class="ml-15">
          <span style="font-weight: bold">账单周期：</span>
          <span>{{ records.startTime }}至{{ records.endTime }}</span>
        </p>
      </div>

      <div class="right">
        <el-button type="primary" v-if="records.status === 1" @click="dialogVisible = true"
          >完成核算</el-button
        >
        <el-button type="primary" @click="exportFile('part')">勾选导出</el-button>
        <el-button type="primary" @click="exportFile('all')">全部导出</el-button>
      </div>
    </div>
    <!-- 结算状态 end -->

    <!-- 数据表格 -->
    <el-card class="mt-20">
      <Tabs :tabs="tabs" :currentKey="currentTab" @tab-click="tabClick" />
      <!-- 数据表格 -->
      <BillTable ref="billTable" />
    </el-card>

    <!-- 审核弹窗 -->
    <BillDialog v-model="dialogVisible" :id="id" @update="handleUpdate" />
  </div>
</template>

<script>
import { useFilterStatistics } from '@/hooks'
import BillTable from '../components/BillTable.vue'
import BillDialog from '../components/BillDialog.vue'
export default {
  name: 'SettleBillDetail',
  components: {
    // 数据表格
    BillTable,
    // 审核弹窗
    BillDialog
  },
  props: {},
  data() {
    return {
      // 控制结算弹窗显示
      dialogVisible: false,
      currentTab: '',
      tabs: [],
      realTimeData: [
        {
          isShow: true,
          baseData: {
            value: '',
            key: 'orderAmount',
            label: '累计总下单金额（元）'
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '总订单下单金额'
          },
          yesterdayData: {
            key: 'orderAmount',
            isShow: true,
            value: 0
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'payAmount',
            label: '累计总支付金额（元）',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '总订单支付金额'
          },
          yesterdayData: {
            key: 'payAmount',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'platformAmount',
            label: '平台累计服务费',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '单笔交易额',
            percentage: '2%（参考）'
          },
          yesterdayData: {
            key: 'platformAmount',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            value: '',
            key: 'costAmount',
            label: '交易手续费（元）'
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '单笔交易额',
            percentage: '0.5%-1%（参考）'
          },
          yesterdayData: {
            key: 'costAmount',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'goodsCashAmount',
            label: '累计成本（元）',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '单个商品的成本累计'
          },
          yesterdayData: {
            key: 'goodsCashAmount',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'orderNum',
            label: '成交订单总数（单）',
            value: ''
          },
          yesterdayData: {
            key: 'orderNum',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'freightAmount',
            label: '累计运费收取（元）',
            value: ''
          },
          yesterdayData: {
            key: 'freightAmount',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'supplierNum',
            label: '收款总供应商数（家）',
            value: ''
          }
        }
      ],
      records: {
        auditTime: '',
        auditUser: '',
        createdTime: '',
        endTime: '',
        exchangeOrderAmount: 0,
        id: 0,
        incomeAmount: 0,
        incomePlatformNum: 0,
        month: '',
        remark: '',
        startTime: '',
        status: 0,
        updatedTime: ''
      }
    }
  },
  computed: {
    id() {
      return this.$route.query.id || ''
    },
    // 结算状态
    settleStatus() {
      const status = {
        1: '待审核',
        2: '已结算'
      }
      return status[this.records.status]
    },
    // 结算状态文本颜色
    settleStatusColor() {
      const colors = {
        1: '#fc4560',
        2: '#409eff'
      }
      return colors[this.records.status]
    }
  },
  created() {
    this.handleCashSettlementBillDetail()
    this.handleTransactionSet()
  },
  methods: {
    //完成结算更新
    handleUpdate() {
      this.handleCashSettlementBillDetail()
    },
    async handleCashSettlementBillDetail() {
      const { data } = await this.$http.integral.cashSettlementApi.getCashSettlementBillDetail(
        this.id
      )
      this.records = data
      await this.handleSettlementBillStatistics()
      await this.handleCashTabs()
    },
    async handleSettlementBillStatistics() {
      let params = {}
      if (this.records.startTime) params.startTime = this.records.startTime
      if (this.records.endTime) params.endTime = this.records.endTime
      const {
        data: { base, up }
      } = await this.$http.integral.cashSettlementApi.getCashStatistics(params)
      // 统计数据
      const realTimeData = {
        baseData: {
          ...base
        },
        yesterdayData: { ...up }
      }
      this.realTimeData = useFilterStatistics(this.realTimeData, realTimeData)
    },
    //获取tab值
    tabClick({ key }) {
      this.currentTab = key
      this.handleCashList(1)
    },
    //获取参数
    handleParams() {
      let params = {}
      if (this.records.startTime) params.startTime = this.records.startTime
      if (this.records.endTime) params.endTime = this.records.endTime
      if (this.currentTab) params.supplierId = this.currentTab
      return params
    },
    //获取积分列表
    handleCashList(type) {
      const params = this.handleParams()
      if (type) params.type = 1
      this.$nextTick(() => {
        this.$refs.billTable.handleCashList(params)
      })
    },
    //获取交易设置
    async handleTransactionSet() {
      const {
        data: { platformRate, costRate }
      } = await this.$http.system.deal.getSet()
      this.realTimeData = this.realTimeData.map(item => {
        if (item.baseData.key === 'costAmount') {
          item.prompt.percentage = `${costRate}%（参考）`
        }
        if (item.baseData.key === 'platformAmount') {
          item.prompt.percentage = `${platformRate}%（参考）`
        }
        return item
      })
    },
    //获取积分列表tab统计
    async handleCashTabs() {
      const { data } = await this.$http.integral.cashSettlementApi.getCashSettleSupplierTab({
        settleId: this.id
      })
      const tabs = []
      data.forEach(item => {
        tabs.push({ label: item.supplierName, num: item.supplierNum, key: item.supplierId })
      })
      this.tabs = tabs
      this.currentTab = this.tabs[0].key
      this.handleCashList()
    },
    //导出
    exportFile(type) {
      const params = this.handleParams()
      this.$nextTick(() => {
        this.$refs.billTable.exportFile(type, params, this.tabs)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.settle-status {
  padding: 10px 5px;
  background-color: #e2f1f9;
}
</style>
